<template>
<!--  <div class="app-container" style="padding: 10px;">-->
    <el-dialog
      :close-on-click-modal="true"
      append-to-body width="60%"
      height="600px" title="物料信息"
      :visible.sync="material.show">
<!--      @close="materialhandleClose"-->

    <el-container>
      <el-main>
        <el-form :model="material.queryParams" ref="queryMaterialForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="物料编码" prop="materialnumber">
            <el-input
              v-model="material.queryParams.materialnumber"
              placeholder="请输入物料编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="物料名称" prop="materialname">
            <el-input
              v-model="material.queryParams.materialname"
              placeholder="请输入物料名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类一级名称" prop="group1name">
            <el-input
              v-model="material.queryParams.group1name"
              placeholder="请输入物料分类一级名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类二级名称" prop="group2name">
            <el-input
              v-model="material.queryParams.group2name"
              placeholder="请输入物料分类二级名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类三级名称" prop="group3name">
            <el-input
              v-model="material.queryParams.group3name"
              placeholder="请输入物料分类三级名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="material.loading" :data="material.rowList"
                  ref="serveTable" @row-click="rowClick"
                  @row-dblclick="rowDoubleClick"
                  @selection-change="handleSelectionChange" height="500px">
          <el-table-column type="selection" width="55" align="center" />
          <!--      <el-table-column label="ID" align="center" prop="id" />-->
          <el-table-column label="序号" align="center" prop="index" />
          <el-table-column label="物料编码" align="center" prop="materialnumber" />
          <el-table-column label="物料名称" align="center" prop="materialname" />
          <el-table-column label="基本单位编码" align="center" prop="baseunitnumber" />
          <el-table-column label="基本单位名称" align="center" prop="baseunitname" />
          <el-table-column label="物料分类一级编码" align="center" prop="group1number" />
          <el-table-column label="物料分类一级名称" align="center" prop="group1name" />
          <el-table-column label="物料分类二级编码" align="center" prop="group2number" />
          <el-table-column label="物料分类二级名称" align="center" prop="group2name" />
          <el-table-column label="物料分类三级编码" align="center" prop="group3number" />
          <el-table-column label="物料分类三级名称" align="center" prop="group3name" />
          <el-table-column label="税率" align="center" prop="taxrate" />
        </el-table>
        <pagination
          v-show="material.total>0"
          :total="material.total"
          :page.sync="material.queryParams.pageNum"
          :limit.sync="material.queryParams.pageSize"
          @pagination="getList"
        />
      </el-main>
    </el-container>
      <span slot="footer" class="dialog-footer">
            <el-button @click="material.show = false">取 消</el-button>
            <el-button type="primary" @click="toParentPage">确 定</el-button>
        </span>
    </el-dialog>
<!--  </div>-->

</template>

<script>
import { listMaterial} from "@/api/settlementCenter/basedata/material";

export default {
  name: "materialView",
  props : {
    tobasedata : {
      type : Object
    }
  },
  data () {
    return {
      //物料
      material:{
        // 遮罩层
        loading: true,
        //是否展示对话框
        show: false,
        //总数
        total: 0,
        // 物料表格数据
        rowList: [],
        //选中的数据
        selectedrowList:[],
        //查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          materialnumber: null,
          materialname: null,
          baseunitnumber: null,
          baseunitname: null,
          group1number: null,
          group1name: null,
          group2number: null,
          group2name: null,
          group3number: null,
          group3name: null,
          taxrate: null,
          createtime: null,
          updatetime: null
        }
      },
      //公用参数
      // 遮罩层
      loading: true,
      //传递到父组件的数据
      transData:{
        //物料数据
        material : null,

      },
    }
  },
  // created() {
  //   this.getList();
  // },
  watch : {
    "tobasedata.material.show":{
      handler(){
        this.resetForm("queryMaterialForm");
        this.getList()
        this.material.show = !this.material.show;
      },
      deep:true
    },

  },
  methods: {
    reset() {
      this.transData = {
        material : null,
      };
      this.resetForm("queryMaterialForm");
    },
    /** 查询物料列表 */
    getList() {
      this.material.loading = true;
      listMaterial(this.material.queryParams).then(response => {
        this.material.rowList = response.rows;
        this.material.total = response.total;
        this.material.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.material.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryMaterialForm");
      this.handleQuery();
    },
    //监听row-click事件，实现选中
    rowClick(row, column, event) {
      let refsElTable = this.$refs.serveTable; // 获取表格对象
      refsElTable.toggleRowSelection(row);  //如过重复选中，则取消选中
    },
    //监听双击事件，实现推送当前行
    rowDoubleClick(row, column, event) {
      let refsElTable = this.$refs.serveTable; // 获取表格对象
      refsElTable.clearSelection(); //清空表格选中数据
      refsElTable.toggleRowSelection(row);  //选中当前行，如过重复选中，则取消选中
      this.toParentPage(); //调用推送方法
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.material.selectedrowList =selection;
      this.transData.material = this.material.selectedrowList[0]
    },
    // 当物料弹出框关闭时向父页面返回结果
    // materialhandleClose(){
    //   this.reset();
    // },
    toParentPage() {
      if (this.material.selectedrowList.length > 1){
        this.$modal.msgError("只能选中一条数据！")
        return;
      }
      this.material.show = false;
      let tempdata = this.transData
      // this.reset();
      this.$emit('emitToParent', tempdata);
    }
  },

}
</script>

<style scoped>

</style>
